<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--<title>爱淘金</title>-->
<link rel="stylesheet" type="text/css" media="all" href="css/swiper.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
<link rel="stylesheet" href="css/style_zwf.css" />
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" language="javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
<script src="js/js.js" type="text/javascript"></script>
<style type="text/css">
	.mask{
		background: rgba(0,0,0,.3);
		top: 0;
	}
	.diapassa{width:6.6rem;display: block;margin:0 auto;background:#fff;border-radius: .1rem;overflow: hidden;}
	.tit{height: .96rem;font-size: .29rem;line-height: .7rem;}
	.tit>span{color:#eb3b00;}
	/*挂单*/
	.guad{background: #fff;color:#333}
	.guad>div{padding:0 .24rem;overflow: hidden;}
	.guad>div>span{height: .76rem;line-height: .76rem;font-size: .35rem;margin: .26rem 0 .2rem 0;display: inline-block;}
	.fl-r{float: right;width: 5.5rem;margin-right: .25rem;height: 2.12rem;}
	.fl-r>input{width: 100%;height: .76rem;font-size: .35rem;margin: .26rem 0 .2rem 0;border:1px solid rgb(239,239,239);outline:none;}
	.fl-r>div{height: .91rem;line-height: .71rem;}
	.fl-r>div>input{width: .89rem;border:1px solid rgb(239,239,239);}
	.guad>p{background: #efefef;height: .72rem;line-height: .72rem;color:#999;padding:0 .2rem;}
	/*涨跌*/
	.zd{padding: .22rem;background: #fff;overflow: hidden;height: 3.3rem;}
	.zd ul{width: 100%;clear: both;}
	.zd ul li{float: left;}
	.zd1{border-radius: 5px;background: #efefef;overflow: hidden;margin-top: .2rem;}
	.zd1>li{width: 50%;text-align: center;height: .7rem;line-height: .7rem;color: #666;}
	.zd1>li>b{font-size: .35rem;color: #333;}
	.zd1>li.active{background: #ec4849;color:#fff;}
	.zd1>li.active b{color:#fff;}
	
	.zd2{overflow: hidden;margin-top: .38rem;}
	.zd2>li{width: 25%;text-align: center;height: .75rem;line-height: .75rem;color: #333;box-sizing: border-box;font-size: .29rem;}
	.zd2>li.active{border:1px solid  #f83d42;color:#f83d42;}
	.zd3{overflow: hidden;margin-top: .38rem;}
	.zd3>li{width: 20%;text-align: center;height: .75rem;line-height: .75rem;color: #333;box-sizing: border-box;font-size: .29rem;}
	.zd3>li.active{border:1px solid  #f83d42;color:#f83d42;}
	.zdz{height: .62rem;background: #efefef;line-height: .62rem;color:#999;padding:0 .2rem;}
	/*充值止损*/
	.cz{background: #fff;padding: 0 .28rem;}
	.zcdiv{font-size: .35rem;height: .91rem;line-height: .91rem;border-bottom: 1px solid #9aa3ad;background: #fff;padding: 0 .27rem;}
	.zcdiv img{width: .45rem;height: .45rem;vertical-align:middle ;}
	.zcdiv a{color:#3267e3 ;}
	.czr{float: right;width: 50%;text-align: right;font-size: .35rem;}
	.czr>span{color:#eb3b00;}
	.czcont{height:3.33rem ;padding: .36rem 0;}
	.czcont>div>p{font-size: .35rem;text-align: center;}
	.czcont>div>p>b{color:rgb(2,182,119);margin: 0 5px;}
	.czcont>div>p>span{font-size: .23rem;color: #333;}
	/*进度条布局*/
	.czbox{height: .45rem;line-height:.45rem;margin-top: .3rem;}
	.ttl,.ttr{display: inline-block;height: .45rem;line-height: .45rem;font-size: .23rem;text-align: left;}
	.ttr{text-align: right;}
	.ttl>img{width:.45rem;height:.45rem;float: left;margin-right: .12rem;}
	.ttc{width:3.98rem ;display: inline-block;margin: 0 .2rem;}
	.ttr>img{width:.45rem;height:.45rem;float: right;margin-left: .12rem;}
	/*进度条*/
	.wdiv{width: 100%;;background:rgb(230,231,234);height:.1rem;border-radius: 10px;position: relative;}
	.ndiv{width: 60%;background:rgb(2,182,119);height:.1rem;border-radius: 10px;}
	.rdiv{width: 60%;background:rgb(249,89,90);height:.1rem;border-radius: 10px;}
	.dot{position: absolute;margin-left: 60%;width: .25rem;height:.25rem;top:-0.07rem;left: -0.1rem;background: rgb(2,182,119);border-radius: 50%;}
	.rdot{position: absolute;margin-left: 60%;width: .25rem;height:.25rem;top:-0.07rem;left: -0.1rem;background: rgb(249,89,90);border-radius: 50%;}
	/*下单*/
	.orderdiv{height: 1.03rem;font-size: .35rem;color: #333;line-height: 1.03rem;background: #fff;padding-left: 0.15rem;}
	.orderdiv>span{color:#999;font-size:.23rem ;}
	.orderdiv>b{color:#eb3b00;}
	.orderdiv>div{float: right;width: 2.31rem;background: rgb(236,72,73);color:#fff;text-align: center;}
</style>
</head>
<body>
	<!--顶部-->
	<div class="header">
		<a href=" javascript:history.go(-1);" class="hele"></a>
		<h1 class="hetitle">挂单</h1>
	</div>
	
	<div id="page" class="page m3" style="padding-bottom: 0;">
		<div class="text-center tit">
			石油<span>444</span>
		</div>
		<!--挂单-->
		<div class="guad">
			<div>
				<span>挂单价</span>
					<div class="fl-r">
						<input type="text" placeholder="挂单价格" name="" id="" value="" style="text-align: center;" />
						<div>
							允许成交价格和挂单价格上下<input type="text" />点误差
						</div>
						
					</div>
				
			</div>
			
			<p>注：设置较大可以保证价格波动时建仓成功</p>
		</div>
		<!--涨跌-->
		<div class="zd">
			<ul class="zd1">
				<li class="active"><b>买涨</b>68%用户买涨</li>
				<li><b>买跌</b>32%用户买涨</li>
			</ul>
			<ul class="zd2">
				<li>类型</li>
				<li class="active">18元/手</li>
				<li>19元/手</li>
				<li>20元/手</li>
			</ul>
			<ul class="zd3">
				<li>建仓</li>
				<li>1手</li>
				<li class="active">5手</li>
				<li>10手</li>
				<li><a href="">其他</a></li>
			</ul>
		</div>
		<div class="zdz">
			每增长1个点，能收益0.1元
		</div>
		<div class="zcdiv">
			<img src="images/change.png"/>
			余额<span>--</span>元 
			<a href="">充值</a>
			<div class="czr">
				<img src="images/nochange.png"/>
				代金劵<span>0</span>张
			</div>
		</div>
		<div class="cz">
			
			<div class="czcont">
				<div>
					<p>止损：<b>24点</b><span>(2.5元)</span></p>
					<div class="czbox">
						<div class="ttl">
							<img src="images/toles.png"/>
							不限
						</div>
						<div class="ttc">
							<div class="wdiv">
								<div class="ndiv">
									
								</div>
								<span class="dot"></span>
							</div>
						</div>
						<div class="ttr">
							72点
							<img src="images/tomore.png"/>
						</div>
					</div>
				</div>
				<div style="margin-top: .35rem;">
					<p>止损：<b>24点</b><span>(2.5元)</span></p>
					<div class="czbox">
						<div class="ttl">
							<img src="images/toles.png"/>
							不限
						</div>
						<div class="ttc">
							<div class="wdiv">
								<div class="rdiv">
									
								</div>
								<span class="rdot"></span>
							</div>
						</div>
						<div class="ttr">
							72点
							<img src="images/tomore.png"/>
						</div>
					</div>
				</div>
			</div>
			
		</div>
		<div class="zdz">
			*建仓后默认过夜,建仓后可以手动设置
		</div>
		<!--下单-->
		<div class="orderdiv">
			总计<b>34.55</b>元 <span>(手续费0.9元)</span>
			<div>
				下单
			</div>
		</div>
	</div>
	<!--遮罩-->
<!--<div class="mask"></div>
<div class="dialog" id="d4" style="display: none;">
	<div class="dialog_content">
		<div class="diapassa">
			<div class="two tk_div">
				<p class="oil_tk">系统提示</p>
				<div>
					<input type="radio" name="check_inp" class="check_inp" checked=""/>
					<span class="check_span">
						10升油可兑换10元代金券
					</span>
				</div>
				<div>
					<input type="radio" name="check_inp" class="check_inp" />
					<span class="check_span">
						10升油可兑换10元代金券
					</span>
				</div>
			</div>
			<div class="two div_btn">
				<button class="suzr suzr_qx" onclick="dialogClose()" type="button">取消</button>
				<button class="suzr suzr_qd" type="button">确定</button>
			</div>	
		</div>
    </div>
</div>-->
<script>
//	$(".mask").on('click',function(){
//		$(".dialog").css('display','none');
//		$(".mask").css('display','none')
//	})
</script>
</body>
</html>